<template>
    <div class='weui-tab__panel order_list' 
        v-infinite-scroll="getMore"
        :infinite-scroll-disabled='!loadMore' 
        infinite-scroll-distance="1000">
        <div class='list_item' v-for='(item, index) in data' v-bind:key='index'>
            <div class='flex_row order_info' style=''>
                <p>订单编号：{{item.order_no}}</p>
                <p>希望送达：{{item.hope_delivery_time}}</p>
            </div>
            <div class='flex_row tit'>
                <div style='flex: 3'>
                    <p>{{item.receive_people}} 13256897458</p>
                    <p>下单时间：{{item.create_time}}</p>
                    <p>共<span>{{item.allNum}}</span>件 支付方式：<span>{{item.pay_type}}</span></p>
                </div>
                <p style='flex: 2'>{{item.receive_address}}</p>
            </div>
            <div class='list_detail' v-for='(lt, index) in item.orderDetailList' v-bind:key='index'>
                <div class='img'>
                    <img class='img' :src='lt.prod_img' />
                </div>
                <div class='detail'>
                    <div class='left'>
                        <p class='title'>{{lt.prod_name}}</p>
                        <p class='spec'>{{lt.prod_specs}}新装上市</p>
                    </div>
                    <div class='right'>
                        <p class='price'>￥{{lt.prod_price}}</p>
                        <p class='num'>× {{lt.prod_num}}</p>
                    </div>
                </div>
            </div>
            <div class='flex_row total'>
                <div>
                    合计：
                    <span class='price'>￥{{item.order_price}}</span>
                </div>
                <div>
                    <input type='button' value='去配送' name='' class='btn' v-show="item.order_status === '0'">
                    <input type='button' value='配送中' name='' disabled class='btn' v-show="item.order_status === '1'">
                    <input type='button' value='完成' name='' disabled class='btn' v-show="item.order_status === '2'">
                </div>
            </div>
        </div>
        <div  class="infinite-loading">
            <mt-spinner type="fading-circle" color="#26a2ff" class="spinner" v-if="loadMore"></mt-spinner>
            <span v-else>没有更多数据了</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'list',
    data() {
        return {
        }
    },
    props: ['status', 'data', 'loadMore'],
    methods: {
        getMore: function () {
            this.$emit('getMore')
        }
    }
}
</script>

<style>
.flex_row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.order_list{
    padding-bottom: 2em
}
.order_list .list_item {
    background: #fff;
    margin-bottom: 0.8em;
    /* border-bottom: 0.1em solid #ccc */
}
.order_list .list_item .order_info {
    font-size: 1.4em;
    padding: 1rem 0.5em;
    background: #b3e5fc; 
    color: #353535;
}
.order_list .list_item .tit {
    font-size: 1.4em;
    color: #888;
    padding: 0.5em;
    border-bottom: 0.1em solid #e1e1e1;
}
.order_list .list_item .tit p span {
    color: red;
}
.order_list .list_item .delete {
    width: 2em;
    height: 2em;
}
.list_detail {
    display: flex;
    flex-direction: 'row';
    padding: 1em;
    justify-content: space-between;
    border-bottom: 0.1em solid #e1e1e1;
}
.order_list .img {
    width: 6em;
    height: 6em;
    margin-right: 0.5em;
}
.order_list .detail {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex: 1;
}
.list_detail .detail .left,
.list_detail .detail .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.list_detail .detail .left .title {
    color: #353535;
    font-size: 1.4em;
    margin-right: 1em;
}
.list_detail .detail .left .spec {
    color: #888;
    font-size: 1.4em;
    margin-top: 0.5em;
}
.list_detail .detail .right .price {
    display: flex;
    flex-direction: column;
    color: #ff461d;
    font-size: 1.4em;
}
.list_detail .detail .right .num {
    color: #888;
    font-size: 1.4em;
    margin-top: 0.5em;
}
.list_item .total {
    padding: 1em;
    font-size: 1.4em;
}
.list_item .total .btn {
    padding: 0.2em 0.5em;
    background: #2295ff;
    border: 0.1em solid #2295ff;
    border-radius: 0.2em;
    color: #fff;
    margin-left: 0.5em;
}
.list_item .total .price {
    font-size: 1em;
    color: #ff461d;
}
</style>